<template>
  <el-dialog
    class="dia-style"
    :title="newTitle"
    :visible.sync="open"
    :close-on-click-modal="false"
    width="850px"
    @close="cancel"
  >
    <!-- 第一部分 -->
    <div class="m-header" style="width: 100%">
      <!-- 单个块 -->
      <div
        v-for="(item, i) in switchArr"
        :key="i"
        class="header-block"
        :class="form.analyseType == item.analyseType ? 'h-acitve' : ''"
        style="margin-bottom: 10px"
        @click="changeIndex(i)"
      >
        <!-- 图片 -->
        <img :src="require('@/assets/images/exchange_' + i + '.svg')" alt class="header-img">
        <!-- 字部分 -->
        <div>
          <div class="h-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import updateStep1 from './updateStep1.vue'
import updateStep2 from './updateStep2.vue'
import updateStep3 from './updateStep3.vue'
import formMock from '../mock/form'

export default {
  name: 'EditDialog',
  components: { updateStep1, updateStep2, updateStep3 },
  props: {
    title: {
      type: String,
      default() {
        return '编辑'
      }
    },
    transferId: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      changeFirst: false,
      newTitle: this.newTitle,
      // 是否打开
      open: false,
      // 到第几步
      active: undefined,
      //  整个form表单
      form: formMock.form,

      // 是否是在选标签方式
      showLabel: false,
      switchArr: [
        { name: '批量分析', analyseType: 'batch' }, // 批量分析
        { name: '实时分析', analyseType: 'stream' }, // 实时分析
        { name: '序列分析', analyseType: 'cep' } // 序列分析
      ]
    }
  },
  computed: {
    // 传递给步骤1的值
    form1() {
      return this.form.ruleEntity
    },
    // 传递给步骤2的值
    form2() {
      const form = {
        eventDetail: this.form.eventDetail,
        rule: this.form.rule,
        priority: this.form.priority
      }
      return form
    },
    // 传递给步骤3的值
    form3() {
      return this.form.cron
    }
  },
  watch: {
    // 监听打卡
    open(newValue, oldValue) {
      if (newValue == false) {
        this.active = 0
        // this.cancel();
      }
    },
    'form.rule.labelType': {
      handler(newValue, oldValue) {
        // 修改值变换
        if (
          newValue &&
          oldValue &&
          newValue !== oldValue &&
          this.title === '编辑' &&
          this.form.rule.action.conditions.length > 0
        ) {
          // this.$message.warning('您改变了【标签分类】的值，下一页的【规则】将清空。')
          this.form.rule.property = {
            conditions: [],
            relation: 'and'
          }
          this.form.rule.action = {
            conditions: [],
            relation: 'and'
          }

          this.form.eventDetail.description = ''
          this.form.eventDetail.temDesc = ''
        }
      },
      // deep: true,
      immediate: true
    },
    form(newsVal) {}
  },
  mounted() {},

  beforeDestroy() {
    // this.cancel();
  },
  methods: {
    // 确定标签
    confirm() {
      this.showLabel = false
      this.newTitle =
        this.form.analyseType === 'stream' ? '实时分析' : this.form.analyseType === 'batch' ? '批量分析' : '序列分析'
    },
    // 上一步
    back() {
      this.active--
    },
    // 下一步
    next() {
      // 是第一步的时候
      if (this.active == 0) {
        // 获取第一步返回的数据
        this.$refs.step1Ref.submit().then(res => {
          this.form = Object.assign({}, this.form, res)
          this.form.eventDetail.name = this.form.ruleEntity.name
          this.form.eventDetail.entityName = this.form.ruleEntity.entityName
          this.active++
          if (!this.changeFirst) {
            this.getRuleTables(this.form.rule.labelType)
          }
        })
      } else {
        this.$refs.step2Ref.submit().then(res => {
          if (res) {
            this.form.ref = res.rule.refResource
            this.form = Object.assign({}, this.form, res)
            this.active++
          }
        })
      }
    },

    // 取消对话框
    cancel() {
      this.active = 0
      this.form.analyseType = 'batch'
      this.open = false
    },
    // 更改选中项
    changeIndex(i) {
      this.form.analyseType = this.switchArr[i].analyseType
      this.cancel()
      this.$router.push(window.prefix + '/icp/ruleDetail?analyseType=' + this.switchArr[i].analyseType)
    },
    // 打开对话框
    show() {
      this.showLabel = this.title === '新增'
      this.newTitle = this.title
      this.open = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__body {
    max-height: 500px;
    display: flex;
    flex-direction: column;
  }
  .el-step__head.is-process,
  .el-step__head.is-success {
    color: #2979ff !important;
    border-color: #2979ff !important;
    .el-step__line {
      color: #2979ff !important;
    }
  }
  .el-step__title.is-process,
  .el-step__title.is-success {
    color: #2979ff !important;
  }
}
.switch-board {
  height: 100%;
  width: 100%;
  .hk-container {
    height: 100%;
    background: #dde4ee;
    padding: 10px;
    width: 100%;
    // 头部
    .m-header {
      position: relative;
      display: flex;
      width: 100%;
    }
    //   底部
    .table-main {
      height: 100%;
      margin-top: 10px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
    }
  }
  .app-container {
    padding: 0;
    height: 100%;
  }
}
</style>
